"use client"

import { useState } from 'react'
import { textStyles, fontSizes, fontWeights } from '../lib/fontConfig'

interface EvolutionStep {
  character: string
  period: string
  description: string
}

interface SimpleEvolutionTimelineProps {
  steps: EvolutionStep[]
  title?: string
}

export function SimpleEvolutionTimeline({ steps, title = "字形演变" }: SimpleEvolutionTimelineProps) {
  const [currentStep, setCurrentStep] = useState(0)
  const [isAnimating, setIsAnimating] = useState(false)

  const handleStepChange = (newStep: number) => {
    if (newStep === currentStep) return
    
    setIsAnimating(true)
    setTimeout(() => {
      setCurrentStep(newStep)
      setIsAnimating(false)
    }, 150)
  }

  return (
    <div className="h-full flex flex-col p-2">
      {/* 标题 */}
      <div className="text-center mb-2">
        <h3 className={`${textStyles.mainTitle} text-purple-800`}>{title}</h3>
        <p className={`${textStyles.caption} text-gray-600`}>点击下方按钮查看不同时期的字形</p>
      </div>

      {/* 当前字形展示区 */}
      <div className="flex-1 flex items-center justify-center bg-white rounded-xl shadow-lg mb-3 p-4 min-h-0">
        <div className="text-center">
          {/* 大字展示 */}
          <div className={`
            ${textStyles.primaryCharacter} text-gray-800 mb-3 transition-all duration-500 transform hover:scale-105 hover:rotate-2 cursor-pointer
            ${isAnimating ? 'scale-75 opacity-50' : 'scale-100 opacity-100'}
          `}>
            {steps[currentStep]?.character}
          </div>
          
          {/* 时期标签 */}
          <div className={`
            text-white px-4 py-2 rounded-full ${textStyles.subTitle} mb-3 transition-all duration-300
            ${currentStep === 0 
              ? 'bg-gradient-to-r from-amber-500 to-orange-500' // 甲骨文：古老的颜色
              : currentStep === steps.length - 1 
                ? 'bg-gradient-to-r from-blue-500 to-purple-500' // 现代：现代的颜色
                : 'bg-gradient-to-r from-green-500 to-teal-500' // 中间：过渡颜色
            }
          `}>
            {currentStep === 0 ? '🏺 ' : currentStep === steps.length - 1 ? '📚 ' : '⚱️ '}
            {steps[currentStep]?.period}
          </div>
          
          {/* 描述 */}
          <p className={`${textStyles.description} text-gray-700 max-w-md mx-auto`}>
            {steps[currentStep]?.description}
          </p>
        </div>
      </div>

      {/* 时间线按钮 */}
      <div className="flex justify-center space-x-3">
        {steps.map((step, index) => (
          <button
            key={index}
            onClick={() => handleStepChange(index)}
            className={`
              relative px-4 py-3 rounded-xl font-medium transition-all duration-300 transform hover:scale-105
              ${currentStep === index
                ? `${index === 0 
                    ? 'bg-gradient-to-r from-amber-500 to-orange-500' 
                    : index === steps.length - 1 
                      ? 'bg-gradient-to-r from-blue-500 to-purple-500' 
                      : 'bg-gradient-to-r from-green-500 to-teal-500'
                  } text-white shadow-lg scale-105`
                : 'bg-white text-gray-700 hover:bg-purple-50 shadow-md'
              }
            `}
          >
            {/* 字符预览 */}
            <div className={`${textStyles.secondaryCharacter} mb-2`}>{step.character}</div>
            
            {/* 时期名称 */}
            <div className={`${textStyles.tag}`}>
              {index === 0 ? '🏺' : index === steps.length - 1 ? '📚' : '⚱️'} {step.period}
            </div>
            
            {/* 连接线 */}
            {index < steps.length - 1 && (
              <div className="absolute -right-6 top-1/2 transform -translate-y-1/2 text-purple-400 text-xl">
                →
              </div>
            )}
          </button>
        ))}
      </div>

      {/* 进度指示器 */}
      <div className="flex justify-center mt-4">
        <div className="flex space-x-2">
          {steps.map((_, index) => (
            <div
              key={index}
              className={`
                w-2 h-2 rounded-full transition-all duration-300
                ${currentStep === index ? 'bg-purple-500 w-6' : 'bg-gray-300'}
              `}
            />
          ))}
        </div>
      </div>
    </div>
  )
} 